<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-19
  Time: 下午9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    body{
        background: #2aabd2;
        padding: 0px;
        padding-top: 3%;
        padding-bottom: 3%;
        color: #ffffff;
    }
    .container-fluid .parent{
        height: 100%;
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
        padding: 10px;
        overflow: hidden;
    }

    .head{
        height: auto;
        width: 100%;
        display: flex;
    }

    .head img{
        display: block;
        height: 300px;
        width: 300px;
        float: left;
    }

    .head .fu-appinfo{
        width: 100%;
        height: auto;
        padding: 20px;
    }

    .fu-inputground{
        margin-bottom: 20px;

    }

    .head span{
        font-size: 20px;
    }

    .head input{
        border: 0px;
        background: rgba(0,0,0,0);
        padding-left: 10px;
        margin-left: 10px;
        border-radius: 4px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 10px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .head .fu-inputvalue{
        width: 400px;
    }

    .fu-appdetail{
        padding: 10px;
    }

    .fu-appdetail h3 img{
        cursor: pointer;
    }

    .fu-appdetail .fu-appdetail-content textarea{
        background: rgba(0,0,0,0);
        border: 0px;
        resize: none;
        width: 880px;
        height: auto;
    }

    .fu-appedit-save{
        width: 100%;
        text-align: center;
        align-content: center;
        display: none;
    }

</style>
</head>
<body>
<div class="container-fluid">
    <div class="parent">
        <form name="form">

            <div class="head col-lg-10 offset-md-1">



                <div class="fu-appinfo">

                    <div class="fu-inputground">
                        <span>名称：</span>
                        <input value="${app.appname}" class="fu-inputvalue" readonly="readonly" onclick="editinfo(this)" name="name" required/>
                    </div>

                    <div class="fu-inputground">
                        <span>URL：</span>
                        <input value="${app.appurl}" class="fu-inputvalue" readonly="readonly" onclick="editinfo(this)" name="url" required/>
                    </div>

                    <div class="fu-inputground">
                        <span>图片：</span>
                        <input value="${app.appimg}" class="fu-inputvalue" readonly="readonly" onclick="editinfo(this)" name="img"/>
                    </div>


                    <div class="fu-inputground">
                        <span>作者：</span>
                        <input value="${app.createuser}" class="fu-inputvalue" readonly="readonly" onclick="editinfo(this)" disabled="disabled"/>
                    </div>

                    <div class="fu-inputground">
                        <c:if test="${app.type=='user'}">
                            <span>类型：</span><label><input type="radio" name="type" checked value="admin" disabled="disabled"/>system</label>
                            <label style="margin-right: 20px"><input type="radio" name="type" checked value="user" disabled="disabled"/>user</label>
                        </c:if>

                        <c:if test="${app.type!='user'}">
                            <span>类型：</span><label><input type="radio" name="type" checked value="admin" disabled="disabled"/>system</label>
                            <label style="margin-right: 20px"><input type="radio" name="type" value="user" disabled="disabled"/>user</label>
                        </c:if>
                    </div>
                </div>
            </div>

            <div class="fu-appdetail col-lg-10 offset-md-3">
                <h3>简介：<img src="/img/appSystemButtom/edit.png" width="16px" onclick="edit()"></h3>

                <div class="fu-appdetail-content" >
                    <textarea disabled="disabled" id="edit">${app.detail}</textarea>
                </div>

                <div class="fu-appedit-save" id="fu-appedit-save">
                    <button class="btn btn-success" type="button" onclick="save()" id="save">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    function edit(){
        $('#edit').attr("disabled",false);
        $('#edit').focus();
        $('#fu-appedit-save').css({"display":"block"});
    }

    function editinfo(obj) {
        obj.readOnly = false;
        $('#fu-appedit-save').css({"display":"block"});
    }

    function save() {
        if (form.name == '' || form.name ==null){
            $('#save').attr("type","submit");
            return;
        }

        if (form.url == '' || form.url ==null){
            $('#save').attr("type","submit");
            return;
        }

        var setting = {
            name:form.name.value,
            url:form.url.value,
            img:form.img.value,
            id:${app.id}
        }

        $.ajax({
            type:"post",
            url:"futer/appsetting/save",
            data:JSON.stringify(setting),
            contentType:"application/json; charset=utf-8",
            dataType:"json",
            success:function (response, ifo) {

            },
            error:function (err) {

            }
        })
    }


</script>

</body>
</html>